<template>
	<view class="content">
		<u-bar-height></u-bar-height>
		
		<view class="back" @tap="back" :style="{top: barHeight + 'px'}"><uni-icons type="left" size="26"></uni-icons></view>
		
		<uni-section class="title" title="我的收藏"></uni-section>
		
		<block v-if="show">
			<view class="box">
				<u-single-list :list="collectionList" :geDanFunctions="geDanFunctions" :loadStatus="loadStatus" :refs="ref" :show="true"></u-single-list>
			</view>
		</block>
		<block v-else>
			<view class="none">暂无记录</view>
		</block>
	</view>
</template>

<script>
	import util from '@/utils/util.js';
	export default {
		data(){
			return {
				show: false,
				collectionList: [],
				loadStatus: 'noMore',
				ref: 'playListPopup',
				geDanFunctions: [
					{text: '收藏', type: 'collection'},
					{text: '添加歌单', type: 'add'},
					{text: '查看歌手', type: 'select'}
				],
				barHeight: 0
			}
		},
		
		onLoad() {
			this.getCollection();
			this.barHeight = getApp().globalData.barHeight;
		},
		
		methods: {
			back(){
				util.jump('navigateBack', '');
			},
			
			getCollection(){
				let value = JSON.parse(util.getStorageSync('collection'));
				if(value.length){
					this.show = true;
					this.collectionList = value;
				}else{
					this.show = false;
				}
			}
		},
		
		onUnload() { 
			uni.$emit('closePopup', this.ref);
		}
	}
</script>

<style>
	@import url("@/static/css/iconfont.css");
	.back{
		padding: 8px;
		position: absolute;
		left: 0;
		z-index: 999;
	}
	
	.title{
		width: 100%;
		text-align: center;
	}
	
	.box{
		width: 100%;
	}
	
	.none{
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		margin-top: 50px;
	}
</style>